<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .banner {
            width: 1000px;
            height: 358px;
            background-image: url("./images/shutter_1.jpg");
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .arrow {
            width: 49px;
            height: 49px;
            background-image: url("./images/shutter_prevBtn.png");
            margin: 0 20px;
        }

        .arrow:hover {
            background-position: 0px -49px;
        }

        .right-arrow {
            /* 标签旋转 */
            transform: rotate(180deg);
            /* 标签缩放 */
            /* transform: scale(0.5); */
        }

        .circle {
            list-style: none;
            display: flex;
            align-self: flex-end;
            padding: 0;
        }

        .circle>li {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px solid #fff;
            margin: 0 10px;
        }

        .active {
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="banner">
        <div class="arrow left-arrow"></div>
        <ul class="circle"></ul>
        <div class="arrow right-arrow"></div>
    </div>

    <script>
        const leftArrow = document.querySelector('.left-arrow');
        const rightArrow = document.querySelector('.right-arrow');
        const banner = document.querySelector('.banner');
        const circle = document.querySelector('.circle');

        const imagesData = [
            { name: 'shutter_1.jpg' },
            { name: 'shutter_2.jpg' },
            { name: 'shutter_3.jpg' },
            { name: 'shutter_4.jpg' },
        ]

        // 当前展示的图片下标
        let index = 0;

        function render() {
            // 负责背景图重新渲染
            banner.style.backgroundImage = `url(./images/${imagesData[index].name})`;
            // 负责小圆点重新渲染
            circleRender();
        }


        circleRender();
        function circleRender() {
            circle.innerHTML = imagesData.map((item, i) => {
                if (i == index) {
                    return `<li class="active" data-i="${i}"></li>`
                }
                return `<li data-i="${i}"></li>`
            }).join('');
        }

        circle.addEventListener('click', function (e) {
            if (e.target.nodeName == 'LI') {
                // 获取到当前点击的li标签对应的下标，修改到全局index
                index = e.target.dataset.i;
                render();
            }
        })

        rightArrow.addEventListener('click', function () {
            index++;
            // index如果等于4了，强制等于0
            if (index >= imagesData.length) {
                index = 0;
            }
            render();
        })

        leftArrow.addEventListener('click', function () {
            index--;
            // index如果等于-1了，强制等于3
            if (index < 0) {
                index = imagesData.length - 1;
            }
            render();
        })

    </script>
</body>

</html>